<template>
  <div class="login">
    <!-- 头部信息展示区 -->
    <div class="header">
      <div class="title">
        <span style="font-size: 20px">养身汤吧在线点餐</span>
      </div>
    </div>
    <!-- 登录区域 -->
    <div class="loginArea">
      <div class="loginForm">
        <van-form @submit="onSubmit">
          <van-field
            class="yh"
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            size="large"
            left-icon="user-o"
            clearable
          />
          <van-field
            :type="showornot"
            v-model="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            size="large"
            left-icon="lock"
            clearable
          >
            <template #button>
              <span @click="isShow">
                <van-icon name="closed-eye" v-if="show" />
                <van-icon name="eye-o" v-else />
              </span>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button
              color="linear-gradient(to right, #6a99f0, #202ef0)"
              round
              block
              type="info"
              native-type="submit"
            >
              登录
            </van-button>
          </div>
          <div class="signUp">
            <span @click="toRegister">没有账号？点击注册</span>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// 引入辅助函数
import { mapMutations } from "vuex";
// 异步加载  引入axios
import { post_json } from "@/http/axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      username: "admin1",
      password: "123321",
      show: true,
      showornot: "password",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    isShow() {
      this.show = !this.show;
      if (this.show === true) {
        this.showornot = "password";
      } else {
        this.showornot = "text";
      }
    },
    // 引入vuex中的mutations
    ...mapMutations(["setToken"]),
    // 登录
    async onSubmit(values) {
      // 配置参数
      let params = {
        username: this.username,
        password: this.password,
      };
      // 发送登录验证请求
      let res = await post_json("/user/login", params);
      // console.log(res);
      if (res.data.status == 200) {
        // 保存token
        this.setToken({ token: res.data.data.token });
        // 跳转到首页
        this.$router.push("/manager/home");
      } else {
        // 提示错误信息
        Toast(res.data.message);
      }
    },
    // 跳转到注册
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
/* 整体样式 */
.login {
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(#ff4b1f, #ff9068); */
  overflow: hidden;
  background: url(../assets/Gt.jpg) no-repeat;
  background-size: 100% 100%;
}
/* .yh .van-cell__title .van-field__label{
  color: red !important;
} */
/* 头部样式 */
.header {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 120px;
}
/* 标题样式 */
.header .title {
  font-family: "webfont";
  font-size: 40px;
  color: white;
}
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("//at.alicdn.com/t/webfont_5cfqve4kicf.eot"); /* IE9*/
  src: url("//at.alicdn.com/t/webfont_5cfqve4kicf.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("//at.alicdn.com/t/webfont_5cfqve4kicf.woff2")
      format("woff2"),
    url("//at.alicdn.com/t/webfont_5cfqve4kicf.woff") format("woff"),
    /* chrome、firefox */ url("//at.alicdn.com/t/webfont_5cfqve4kicf.ttf")
      format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("//at.alicdn.com/t/webfont_5cfqve4kicf.svg#NotoSansHans-Black")
      format("svg"); /* iOS 4.1- */
}
/* 中间登录输入区域 卡片样式 */
.loginArea {
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
  /* background-color: white; */
  transition: 0.3s;
  width: 90%;
  border-radius: 5px;
  margin: 165px auto;
  height: 250px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  /* text-align: center; */
  top: 90px;
  left: 3%;
}
.loginArea:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* 输入框整体样式 */
.loginForm {
  padding-top: 20px;
}
/* 注册样式 */
.signUp {
  color: #11998e;
  text-align: center;
}
.van-field {
  background: rgba(255, 255, 255, 0);
  height: 55px;
  color: aliceblue;

  /* linear-gradient:(to right, #6a99f0, #202ef0) */
}
.van-field__label {
  color: aliceblue;
}
.van-field__control{
  color: aliceblue;
  
}
</style>
